<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端API测试</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        .test-section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px; }
        .success { color: green; }
        .error { color: red; }
        button { padding: 10px 15px; margin: 5px; cursor: pointer; }
        pre { background: #f5f5f5; padding: 10px; border-radius: 3px; overflow-x: auto; }
        .log { margin: 5px 0; padding: 5px; border-left: 3px solid #007bff; }
    </style>
</head>
<body>
    <h1>订单API测试页面</h1>
    
    <div class="test-section">
        <h3>1. 测试连接</h3>
        <button onclick="testConnection()">测试RabbitMQ连接</button>
        <div id="connection-result"></div>
    </div>
    
    <div class="test-section">
        <h3>2. 创建订单</h3>
        <button onclick="createTestOrder()">创建测试订单</button>
        <div id="order-result"></div>
    </div>
    
    <div class="test-section">
        <h3>3. 查询订单状态</h3>
        <input type="text" id="orderNo" placeholder="输入订单号" style="width: 200px;">
        <button onclick="queryOrderStatus()">查询状态</button>
        <div id="status-result"></div>
    </div>
    
    <div class="test-section">
        <h3>4. 测试日志</h3>
        <div id="logs"></div>
        <button onclick="clearLogs()">清空日志</button>
    </div>

    <script>
        const API_BASE = 'http://127.0.0.1:8000/api/orders';
        
        function log(message, type = 'info') {
            const logs = document.getElementById('logs');
            const logDiv = document.createElement('div');
            logDiv.className = `log ${type}`;
            logDiv.innerHTML = `<strong>[${new Date().toLocaleTimeString()}]</strong> ${message}`;
            logs.appendChild(logDiv);
            logs.scrollTop = logs.scrollHeight;
        }
        
        function clearLogs() {
            document.getElementById('logs').innerHTML = '';
        }
        
        async function testConnection() {
            const resultDiv = document.getElementById('connection-result');
            log('开始测试连接...');
            
            try {
                const response = await fetch(`${API_BASE}/test-connection`);
                const data = await response.json();
                
                if (response.ok) {
                    resultDiv.innerHTML = `<div class="success">✅ 连接成功</div><pre>${JSON.stringify(data, null, 2)}</pre>`;
                    log('连接测试成功', 'success');
                } else {
                    resultDiv.innerHTML = `<div class="error">❌ 连接失败</div><pre>${JSON.stringify(data, null, 2)}</pre>`;
                    log('连接测试失败', 'error');
                }
            } catch (error) {
                resultDiv.innerHTML = `<div class="error">❌ 网络错误: ${error.message}</div>`;
                log(`连接测试异常: ${error.message}`, 'error');
            }
        }
        
        async function createTestOrder() {
            const resultDiv = document.getElementById('order-result');
            log('开始创建测试订单...');
            
            const orderData = {
                goods_ids: [1, 2],
                quantities: [2, 1],
                remark: '网页测试订单'
            };
            
            try {
                const response = await fetch(`${API_BASE}/create`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(orderData)
                });
                
                const data = await response.json();
                
                if (response.ok) {
                    resultDiv.innerHTML = `<div class="success">✅ 订单创建成功</div><pre>${JSON.stringify(data, null, 2)}</pre>`;
                    log(`订单创建成功: ${data.data?.order_no}`, 'success');
                    
                    // 自动填入订单号
                    if (data.data?.order_no) {
                        document.getElementById('orderNo').value = data.data.order_no;
                    }
                } else {
                    resultDiv.innerHTML = `<div class="error">❌ 订单创建失败</div><pre>${JSON.stringify(data, null, 2)}</pre>`;
                    log('订单创建失败', 'error');
                }
            } catch (error) {
                resultDiv.innerHTML = `<div class="error">❌ 网络错误: ${error.message}</div>`;
                log(`订单创建异常: ${error.message}`, 'error');
            }
        }
        
        async function queryOrderStatus() {
            const orderNo = document.getElementById('orderNo').value.trim();
            const resultDiv = document.getElementById('status-result');
            
            if (!orderNo) {
                alert('请输入订单号');
                return;
            }
            
            log(`开始查询订单状态: ${orderNo}`);
            
            try {
                const response = await fetch(`${API_BASE}/status/${orderNo}`);
                const data = await response.json();
                
                if (response.ok) {
                    resultDiv.innerHTML = `<div class="success">✅ 状态查询成功</div><pre>${JSON.stringify(data, null, 2)}</pre>`;
                    log(`状态查询成功: ${data.data?.status}`, 'success');
                } else {
                    resultDiv.innerHTML = `<div class="error">❌ 状态查询失败</div><pre>${JSON.stringify(data, null, 2)}</pre>`;
                    log('状态查询失败', 'error');
                }
            } catch (error) {
                resultDiv.innerHTML = `<div class="error">❌ 网络错误: ${error.message}</div>`;
                log(`状态查询异常: ${error.message}`, 'error');
            }
        }
        
        // 页面加载时自动测试连接
        window.onload = function() {
            log('页面加载完成，准备测试API');
            setTimeout(testConnection, 1000);
        };
    </script>
</body>
</html>
